<template>
	<view>
		<view class="pay-top">
			<view class="pay-top-money">
				￥50.00
			</view>
			<view class="pay-top-title">
				需支付金额
			</view>
		</view>
		<view class="recharge-box">
			<view class="recharge">
				请选择支付方式
			</view>
			<view class="recharge-list ">
				<view class="recharge-list-item flex justify-between" v-for="(item,index) in rechargeList" :key="index"
					@tap="tabSelectRecharge(index)">
					<view class="flex">
						<image :src="item.img" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<image class="active-img" :src="rechargeActiveTab == index ? item.choose: item.noChoose" mode="">
					</image>
				</view>
			</view>
		</view>
		<view class="btn" @click="$helper.to('/pages/tabBar/activity/activeSuccess/activeSuccess?title='+'支付成功'+'&leftBtn='+'查看订单');">
			立即下单
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rechargeActiveTab: 0,
				rechargeList: [{
						name: '微信',
						img: '/static/image/activity/wxp.png',
						choose: '/static/image/activity/pay-active.png',
						noChoose: '/static/image/activity/pay.png'
					},
					{
						name: '支付宝',
						img: '/static/image/activity/zfb.png',
						choose: '/static/image/activity/pay-active.png',
						noChoose: '/static/image/activity/pay.png'
					},
					{
						name: '积分',
						img: '/static/image/activity/jf.png',
						choose: '/static/image/activity/pay-active.png',
						noChoose: '/static/image/activity/pay.png'
					}
				],
			}
		},
		methods: {
			//充值tab切换
			tabSelectRecharge(index) {
				this.rechargeActiveTab = index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pay-top {
		width: 100%;
		height: 300rpx;
		background-color: #fff;
		text-align: center;
		padding-top: 100rpx;

		.pay-top-money {
			font-weight: bold;
			font-size: 60rpx;
			color: #333333;
			line-height: 45rpx;
		}

		.pay-top-title {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			margin-top: 20rpx;
		}
	}
	.recharge-box{
		background-color: #fff;
		padding: 20rpx;
	}
	.recharge {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin-top: 20rpx;
	}

	.recharge-list {
		.recharge-list-item {
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
			margin-top: 30rpx;

			text {
				margin: 8rpx 0 0 20rpx;
			}

			image {
				width: 50rpx;
				height: 50rpx;
			}

			.active-img {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.btn {
		position: fixed;
		bottom: 100rpx;
		width: 690rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FEC92F;
		background-color: #000000;
		left: 50%;
		transform: translate(-50%);
		border-radius: 50rpx;
	}
</style>